<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>星络引擎 - Xlore量子文档解析器</title>
    <!-- 样式和库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-twilight.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.3/katex.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --quantum-blue: #00f3ff;
            --neon-purple: #bc13fe;
            --matrix-green: #00ff9d;
            --deep-space: #0a0a1a;
            --hologram-bg: rgba(16, 16, 32, 0.95);
        }

        body {
            background: radial-gradient(circle at center, var(--deep-space), #000);
            font-family: 'IBM Plex Mono', monospace;
            color: var(--matrix-green);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            max-width: 1400px;
            margin: 0 auto;
            background: var(--hologram-bg);
            border: 2px solid var(--quantum-blue);
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 0 30px rgba(0, 243, 255, 0.2);
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(0deg, transparent 24%, rgba(0, 243, 255, 0.1) 25%, rgba(0, 243, 255, 0.1) 26%, transparent 27%),
                linear-gradient(90deg, transparent 24%, rgba(0, 243, 255, 0.1) 25%, rgba(0, 243, 255, 0.1) 26%, transparent 27%);
            background-size: 50px 50px;
            opacity: 0.3;
            z-index: 0;
        }

        .editor-pane, .preview-pane {
            min-height: 85vh;
            padding: 2rem;
            background: rgba(8, 8, 20, 0.9);
            border: 1px solid var(--neon-purple);
            border-radius: 4px;
            position: relative;
            z-index: 1;
        }

        #editor {
            width: 100%;
            height: 100%;
            background: transparent;
            border: none;
            resize: none;
            color: var(--quantum-blue);
            font-size: 1.1rem;
            line-height: 1.8;
            outline: none;
        }

        #editor:focus {
            box-shadow: none;
            border: none;
        }

        .preview-pane {
            overflow-y: auto;
            font-family: 'Source Code Pro', monospace;
        }

        .preview-pane h1, .preview-pane h2 {
            color: var(--neon-purple);
            border-bottom: 1px solid var(--matrix-green);
            font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 10px rgba(188, 19, 254, 0.5);
        }

        .preview-pane code {
            background: rgba(32, 32, 64, 0.9);
            color: var(--matrix-green);
            padding: 2px 6px;
            border-radius: 3px;
        }

        .preview-pane pre {
            background: rgba(0, 0, 30, 0.9) !important;
            border: 1px solid var(--quantum-blue);
            border-radius: 4px;
            padding: 1.2rem;
            overflow-x: auto;
            box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
        }

        .preview-pane table {
            border-collapse: collapse;
            margin: 1.5rem 0;
            background: rgba(16, 16, 32, 0.9);
            border: 1px solid var(--neon-purple);
        }

        .preview-pane th {
            background: var(--neon-purple);
            color: var(--deep-space);
            padding: 0.8rem;
            font-weight: bold;
        }

        .preview-pane td {
            padding: 0.8rem;
            border: 1px solid var(--quantum-blue);
            color: var(--matrix-green);
        }

        .controls {
            position: fixed;
            top: 30px;
            right: 30px;
            display: flex;
            gap: 1.5rem;
        }

        .quantum-button {
            background: linear-gradient(45deg, var(--quantum-blue), var(--neon-purple));
            border: none;
            padding: 12px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
        }

        .quantum-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 25px rgba(0, 243, 255, 0.8);
        }

        .katex-display {
            overflow-x: auto;
            padding: 1rem 0;
        }
 /* 新增滚动条样式 */
 .preview-pane::-webkit-scrollbar {
            width: 8px;
            background: rgba(8, 8, 20, 0.9);
        }

        .preview-pane::-webkit-scrollbar-thumb {
            background: var(--quantum-blue);
            border-radius: 4px;
            border: 1px solid var(--neon-purple);
        }

        .preview-pane::-webkit-scrollbar-track {
            background: rgba(0, 243, 255, 0.1);
        }

        /* 优化公式显示 */
        .katex {
            font-size: 1.1em !important;
            padding: 0 2px !important;
        }

        .katex-display {
            margin: 1em 0 !important;
            padding: 12px 0 !important;
            overflow-x: visible;
        }

        .katex-display > .katex {
            display: inline-block;
            white-space: nowrap;
        }
        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
                padding: 1rem;
            }
            .editor-pane, .preview-pane {
                min-height: 50vh;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="editor-pane">
            <textarea id="editor" placeholder=">>> 输入星络量子文档..."></textarea>
        </div>
        <div class="preview-pane" id="preview"></div>
    </div>

    <div class="controls">
        <button class="quantum-button"><i class="fas fa-atom"></i></button>
    </div>

    <!-- 脚本库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.15.3/katex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.3.8/purify.min.js"></script>

    <script>
         // 增强数学公式支持（最终版）
         const renderMath = (text) => {
            // 处理块级公式（$$...$$）
            let result = text.replace(/\$\$([\s\S]*?)\$\$/g, (_, math) => {
                try {
                    return katex.renderToString(math, { 
                        displayMode: true,
                        throwOnError: false
                    });
                } catch (e) {
                    console.error('公式解析错误:', e);
                    return math;
                }
            });

            // 处理行内公式（$...$），排除转义情况
            result = result.replace(/(?<!\\)\$([^\n$]*?)(?<!\\)\$/g, (_, math) => {
                try {
                    return katex.renderToString(math, {
                        displayMode: false,
                        throwOnError: false
                    });
                } catch (e) {
                    console.error('行内公式错误:', e);
                    return math;
                }
            });

            // 处理转义的美元符号
            return result.replace(/\\\$/g, "$");
        };


        // 配置Marked
        marked.setOptions({
            highlight: (code, lang) => {
                return Prism.highlight(code, Prism.languages[lang] || Prism.languages.markup, lang);
            },
            breaks: true
        });

        // 实时渲染
        const editor = document.getElementById('editor');
        const preview = document.getElementById('preview');

        const updatePreview = () => {
            const raw = editor.value;
            const withMath = renderMath(raw);
            const html = marked.parse(withMath);
            preview.innerHTML = DOMPurify.sanitize(html);
            
            // 动态加载字体
            const loadFont = (fontName) => {
                if (!document.fonts.check(`1em "${fontName}"`)) {
                    const fontLink = document.createElement('link');
                    fontLink.href = `https://fonts.googleapis.com/css2?family=${fontName.replace(/ /g, '+')}&display=swap`;
                    fontLink.rel = 'stylesheet';
                    document.head.appendChild(fontLink);
                }
            };
            
            loadFont('Orbitron');
            loadFont('IBM Plex Mono');
        };

        editor.addEventListener('input', updatePreview);
        editor.value = `# Xlore量子文档协议\n\n行内公式示例：\n量子态叠加原理 $\\psi(x) = \\alpha|0\\rangle + \\beta|1\\rangle$\n\n块级公式：\n$$\nH(t) = \\sum_{j=1}^n \\frac{p_j^2}{2m} + \\frac{1}{2}m\\omega^2 x_j^2\n$$\n\n| 参数 | 表达式 |\n|------|--------|\n| 波函数 | $\\psi(x,t)$ |\n| 哈密顿量 | $H = -\\frac{\\hbar^2}{2m}\\nabla^2 + V(x)$ |`;
        updatePreview();
    </script>
</body>
</html>